<!--
 * @Author: taosong 2289713738@qq.com
 * @Date: 2023-12-20 13:24:44
 * @LastEditors: taosong 2289713738@qq.com
 * @LastEditTime: 2023-12-20 13:35:31
 * @FilePath: \vue3.0-study\src\example\watch.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!-- watch和watchEffect两种监听 watch的针对性更强，watchEffect则没有很强的针对性，它会根据内部的响应属性变化触发 -->
<!-- watch想要在监听创建的时候立即执行需要配置immediate,watchEffect则自带立即执行 -->
<script setup lang="ts">
import { watch, ref, watchEffect } from 'vue'

const data = ref('')

const changeId = ref(0)

const changeChangeIdClick = () => {
  changeId.value++
}

watch(changeId, newVal => {
  console.log('改变之后的changeId', newVal)
})

watchEffect(() => {
  console.log(changeId.value)
  data.value = String(changeId.value)
})
</script>

<template>
  <div>
    <button @click="changeChangeIdClick">修改changeId</button>
  </div>
</template>

<style lang="scss" scoped></style>
